<template>
    <el-form-item class="block-item" style="width: 100%;">
        <el-card class="form-card" style="width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>配置x,y轴信息</span>
                    <div class="header-actions">
                        <el-button type="primary" size="small" :disabled="!props.hasSql"
                            @click="$emit('get-columns')">获取候选列</el-button>
                        <el-button type="primary" size="small" :disabled="!props.hasSql"
                            @click="$emit('ai-generate')">AI生成</el-button>
                        <el-button type="primary" size="small" :disabled="!props.hasXy"
                            @click="$emit('validate')">验证配置</el-button>
                    </div>
                </div>
            </template>
            <div style="display: flex; border: solid 1px #ddd; padding: 5px 10px 5px 10px;">
                <div>可选操作符</div>
                <div class="flex gap-2">
                    <el-tag style="margin-left: 20px;" type="primary" v-for="op in operators" :key="op.value"
                        draggable="true" @dragstart="handleDragStart($event, op)">
                        {{ op.value }}
                    </el-tag>
                </div>
            </div>

            <div class="axis-config">
                <!-- 可选列 -->
                <el-card shadow="hover" class="axis-card">
                    <template #header>可选列</template>
                    <div class="column-list">
                        <div v-for="item in props.availableColumns" :key="item.value" class="column-item" draggable="true"
                            @dragstart="handleDragStart($event, item)">
                            {{ item.label }}
                        </div>
                    </div>
                </el-card>

                <!-- X轴配置 -->
                <el-card shadow="hover" class="axis-card">
                    <template #header>
                        <div class="axis-header">
                            <span>X轴</span>
                            <el-button type="primary" link @click="addColumn('x')">添加列</el-button>
                        </div>
                    </template>
                    <div class="x-axis-columns">
                        <div v-for="(col, index) in props.xColumns" :key="index" class="x-column">
                            <div class="x-column-group">
                                <el-input-tag v-model="col.values" draggable placeholder="请拖入操作符或候选列"
                                    @change="handleTagChange('x', index)" @drop="handleDrop($event, 'x', index)"
                                    @create="handleCreateTag">
                                    <template #tag="{ value }">
                                        <span class="operator-tag">{{ value.label }}</span>
                                    </template>
                                </el-input-tag>
                                <el-button @click="removeColumn('x', index)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                </el-button>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- Y轴配置 -->
                <el-card shadow="hover" class="axis-card2">
                    <template #header>
                        <div class="axis-header">
                            <span>Y轴</span>
                            <el-button type="primary" link @click="addColumn('y')">添加列</el-button>
                        </div>
                    </template>
                    <div class="y-axis-columns" @dragover.prevent>
                        <div v-for="(col, index) in props.yColumns" :key="index" class="y-column">
                            <div class="y-column-group">
                                <el-input-tag v-model="col.values" draggable placeholder="请拖入操作符或候选列"
                                    @change="handleTagChange('y', index)" @drop="handleDrop($event, 'y', index)"
                                    @create="handleCreateTag">
                                    <template #tag="{ value }">
                                        <span class="operator-tag">{{ value.label }}</span>
                                    </template>
                                </el-input-tag>
                                <el-select v-model="col.aggregation" style="width: 160px;" placeholder="聚合函数">
                                    <el-option label="不变" value="none" />
                                    <el-option label="求和" value="sum" />
                                    <el-option label="平均值" value="avg" />
                                    <el-option label="最大值" value="max" />
                                    <el-option label="最小值" value="min" />
                                    <el-option label="计数" value="count" />
                                </el-select>
                                <el-button @click="removeColumn('y', index)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                </el-button>
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
        </el-card>
    </el-form-item>
</template>

<script setup>
import { Aim, Delete } from '@element-plus/icons-vue'

const props = defineProps({
    availableColumns: {
        type: Array,
        required: true
    },
    operators: {
        type: Array,
        required: true
    },
    xColumns: {
        type: Array,
        required: true
    },
    yColumns: {
        type: Array,
        required: true
    },
    hasSql: {
        type: Boolean,
        required: true
    },
    hasXy: {
        type: Boolean,
        required: true
    }
})

const emit = defineEmits([
    'update:xColumns',
    'update:yColumns',
    'get-columns',
    'ai-generate',
    'validate',
    'hand-drop',
    
])

const handleDragStart = (event, item) => {
    console.log("handleDragStart", item.label)
    // 设置拖拽数据
    event.dataTransfer.setData('text/plain', item.label)
    event.dataTransfer.setData('application/x-drag-data', JSON.stringify(item))
}


const handleDrop = (event, axis, columnIndex) => {
    console.log("handleDrop", axis)
    emit('hand-drop', event, axis, columnIndex)
}

const handleTagChange = (axis, columnIndex) => {
    console.log("handleTagChange", axis)
    emit('handle-tag-change', axis, columnIndex)
}

const handleCreateTag = (tag) => {
    console.log("handleCreateTag")
    // 检查是否是操作符
    if (tag.startsWith('=')) {
        const op = operators.value.find(o =>
            o.label.toLowerCase().includes(tag.slice(1).toLowerCase()) ||
            o.value.includes(tag.slice(1))
        )
        if (op) {
            return op.value
        }
    }
    return tag
}

const addColumn = (axis) => {
    console.log("addColumn", axis)
    emit(`add-column`, axis)
}

const removeColumn = (axis, index) => {
    emit(`remove-column`, axis, index)
}


</script>

<style scoped>
.axis-config {
    display: flex;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.axis-card {
    flex: 2;
}

.axis-card2 {
    flex: 3;
}

.column-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;  /* 新增固定高度 */
    overflow-y: auto;    /* 添加垂直滚动条 */
    flex-shrink: 0;      /* 防止内容收缩 */
}

.column-item {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: move;
    flex-shrink: 0;     /* 防止单个项目收缩 */
}

.axis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.x-column-group,
.y-column-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.operator-tag {
    padding: 2px 4px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>